<template>
  <!-- MV模块 -->
  <div class="mod-mvs">
    <div class="container">
      <div class="mvs-nav">
        <ul class="mvs-nav-list clearfix">
          <li
            @click="searchMvs('&area=' + item, 0, index)"
            :class="[
              'mvs-nav-item',
              { 'mvs-nav-item-current': currentIndex[0] == index },
            ]"
            v-for="(item, index) in area"
            :key="index"
          >
            <a href="javascript:;">{{ item }}</a>
          </li>
        </ul>
        <ul class="mvs-nav-list clearfix">
          <li
            @click="searchMvs('&type=' + item, 1, index)"
            :class="[
              'mvs-nav-item',
              { 'mvs-nav-item-current': currentIndex[1] == index },
            ]"
            v-for="(item, index) in type"
            :key="index"
          >
            <a href="javascript:;">{{ item }}</a>
          </li>
        </ul>
        <ul class="mvs-nav-list clearfix">
          <li
            @click="searchMvs('&order=' + item, 2, index)"
            :class="[
              'mvs-nav-item',
              { 'mvs-nav-item-current': currentIndex[2] == index },
            ]"
            v-for="(item, index) in order"
            :key="index"
          >
            <a href="javascript:;">{{ item }}</a>
          </li>
        </ul>
      </div>
      <div ref="mvsMain" class="mvs-main">
        <ul class="mvs-main-list clearfix">
          <li class="mvs-main-item" v-for="item in mvs" :key="item.id">
            <mv-list :item="item"></mv-list>
          </li>
        </ul>
      </div>
      <div class="mvs-el-pagination">
        <el-pagination
          background
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          :page-size="pageSize"
          layout="prev, pager, next, jumper"
          :total="listsTotal"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import MvList from "components/mvlist/MvList.vue";
export default {
  components: {
    MvList,
  },
  data() {
    return {
      area: ["全部", "内地", "港台", "欧美", "日本", "韩国"],
      type: ["全部", "官方版", "原生", "现场版", "网易出品"],
      order: ["上升最快", "最热", "最新"],
      mvs: [],
      currentPage: 1,
      pageSize: 30,
      listsTotal: 30,
      params: ["", "", ""],
      param: "",
      // 后面是否还有数据
      pm: 1,
      currentIndex: [0, 0, 0],
    };
  },
  mounted() {
    this.getMvs("");
  },
  methods: {
    searchMvs(str, key, index) {
      this.param = "";
      for (let i = 0; i < 3; i++) {
        if (i == key) {
          this.params[i] = str;
        }
        this.param += this.params[i];
      }
      console.log(this.param);
      this.currentPage = 1;
      this.listsTotal = 30;
      this.pm = 1;
      this.currentIndex[key] = index;
      this.getMvs(this.param);
    },
    handleCurrentChange() {
      console.log(this.currentPage);
      this.getMvs(this.param);
      // 点击分页后，滚动到评论的头部，141为页面头部组件的高度
      document.documentElement.scrollTo({
        top: this.$refs.mvsMain.offsetTop + 141,
        behavior: "smooth",
      });
    },
    getMvs(param) {
      this.axios({
        /* mv接口地址 */
        url: "/mv/all?limit=30&offset=" + (this.currentPage - 1) * 60 + param,
      })
        .then((res) => {
          this.mvs = res.data.data;
          console.log(this.mvs);
          if (res.data.hasMore) {
            if (this.currentPage == this.pm) {
              this.pm++;
              this.listsTotal += 30;
            }
          } else {
            this.pm = this.listsTotal / 30 + 1;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>

<style>
.mod-mvs {
  padding-top: 50px;
  background-color: var(--color-theme-light-5);
}
.mvs-nav {
  margin-bottom: 50px;
  padding: 30px 0 14px 20px;
  font-size: 14px;
  color: #000;
  background-color: var(--color-theme-light-4);
}
.mvs-nav-item {
  float: left;
  margin: 0 10px 16px 0;
  padding: 0 10px;
  height: 26px;
  line-height: 26px;
  cursor: pointer;
}
.mvs-nav-item:hover a {
  color: var(--color-theme);
}
.mvs-nav-item:nth-child(1) {
  margin-right: 28px;
}
.mvs-nav-item-current {
  background-color: var(--color-theme);
}
.mvs-nav-item-current a {
  color: #fff !important;
}
.mvs-main-list {
  margin-right: -20px;
  margin-bottom: 50px;
}
.mvs-main-item {
  float: left;
  width: 20%;
}
.mvs-el-pagination {
  position: relative;
  text-align: center;
  margin: 20px auto;
}
</style>